<template>
  <div class="stackedlinechart" id="stackedlinechart"  :style="{width: '700px', height: '550px'}"></div>
</template>

<script>
export default {
  name: "StackedLineChart",
  data(){
    return{
      platformLists: [],
      series : [],
      show: false,
    }
  },
  methods: {
  },
 created() {
 },
  mounted() {
    let _this = this
    axios.get(this.$base_url+'sys/webinfo').then(res => {
      for (let item of res.data.data) {
        if (item.isshow==1){
          _this.platformLists.push(item.webname)
        }
      }
    })
    axios.get(this.$base_url+'lineandbarchart/line/alltoponeforsevendays').then(function (response) {
      var bdnewshot = {
        name: '百度热搜',
        type: 'bar',
        stack: 'Total',
        data: response.data.data.bddata,
        // symbol: 'circle',     //设定为实心点
        // symbolSize: 15,   //设定实心点的大小
        // label:{
        //   show:true,
        //   formatter: "{b}",
        //   fontSize: 10,
        //   position:"inner",
        // },
        itemStyle : {
          normal : {
            color:'#EE6867', //改变折线点的颜色
            lineStyle:{
              color: '#EE6867'//改变折线颜色
            }
          }
        },
      }
      var jrnewshot = {
        name: '今日头条',
        type: 'bar',
        stack: 'Total',
        data: response.data.data.jrdata,
        // symbol: 'circle',     //设定为实心点
        // symbolSize: 15,   //设定实心点的大小
        // label:{
        //   show:true,
        //     formatter: "{b}",
        //     fontSize: 10,
        //     position:"inner"
        // },
        itemStyle : {
          normal : {
            color:'#94CC75', //改变折线点的颜色
            lineStyle:{
              color: '#94CC75'//改变折线颜色
            }
          }
        },
      }
      var txnewshot = {
        name: '腾讯新闻',
        type: 'bar',
        stack: 'Total',
        data: response.data.data.txdata,
        // symbol: 'circle',     //设定为实心点
        // symbolSize: 15,   //设定实心点的大小
        // label:{
        //   show:true,
        //   formatter: "{b}",
        //   fontSize: 10,
        //   position:"inner"
        // },
        itemStyle : {
          normal : {
            color:'#F9C759', //改变折线点的颜色
            lineStyle:{
              color: '#F9C759'//改变折线颜色
            }
          }
        },
      }
      var wbnewshot = {
        name: '微博热搜',
        type: 'bar',
        stack: 'Total',
        data: response.data.data.wbdata,
        // symbol: 'circle',     //设定为实心点
        // symbolSize: 15,   //设定实心点的大小
        // label:{
        //   show:true,
        //   formatter: "{b}",
        //   fontSize: 10,
        //   position:"inner"
        // },
        itemStyle : {
          normal : {
            color:'#5973C4', //改变折线点的颜色
            lineStyle:{
              color: '#5973C4'//改变折线颜色
            }
          }
        },
      }
      for (let item of _this.platformLists) {
        switch (item){
          case "百度热搜":
            _this.series.push(bdnewshot);
            break;
          case "微博热搜":
            _this.series.push(wbnewshot);
            break;
          case "腾讯新闻":
            _this.series.push(txnewshot);
            break;
          case "今日头条":
            _this.series.push(jrnewshot);
            break;
        }
      }
      let myChart = _this.$echarts.init(document.getElementById('stackedlinechart'))
      myChart.setOption({
        backgroundColor:'#FFFFFF',//背景颜色白色
        title: {
          text: '近七天全平台top1',
          left: 'buttom'
        },
        tooltip: {
          // trigger: 'axis',
          // axisPointer: {
          //   type: 'shadow',
          //
          // },
          formatter: '{b} : '+"\n"+' {c}',
        },
        legend: {
          data: _this.platformLists
        },
        // grid: {
        //   left: '10%',
        //   right: '10%',
        //   containLabel: true
        // },

        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        xAxis: {
          type: 'category',
          // boundaryGap: false,
          data: response.data.data.hotdate
        },
        yAxis: {
          type: 'value',
          scale:true,
          // axisLabel: {
          //   show: true,
          //   textStyle: {
          //     color: '#000000',
          //     fontSize: '8',//字体大小
          //   },
          // },
        },
        //滚动条设置
        // dataZoom: [
        //   {
        //     type: 'slider',
        //     show: true,
        //     handleSize: 30,
        //     height: '15px',
        //     start: 0,
        //     end: 60
        //   },
        // ],
        series: _this.series
      })
    })
  }

}
</script>

<style scoped>
.stackedlinechart{
  margin-top: 40px;
}
.stackedlinechart:hover {
  -webkit-box-shadow: #ccc 0px 10px 10px;
  -moz-box-shadow: #ccc 0px 10px 10px;
  box-shadow: #ccc 0px 10px 10px;
}
</style>